<template>
	<view class="demand-container">
    <scroll-view scroll-y style="height:100vh">
	  	<view v-for="(item, index) in 10" class="demand-item" @click="$goPage('/demand/detail')">
				<view class="demand-item-header">
					<i class="icon icon-video"></i>
					<text class="demand-item-header-time">需求: <text>2023-03-03 22:21</text></text>
					<view class="demand-item-header-tag">船舶维修保养</view>	
				</view>
				<view class="demand-content">
					需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求
					需求需求需求需求需求需求需求需求需求需求需求需求
				</view>
				<view class="stat-tag stat-tag-gray" v-if="false">>修理完成</view>
				<view class="stat-tag stat-tag-success">已解决</view>
				<view class="stat-tag stat-tag-error" v-if="false">修理终止</view>
				<view class="stat-tag stat-tag-black" v-if="false">已转修理单</view>
			</view>
	  </scroll-view>
	</view>
</template>

<script>
import { defineComponent,reactive, toRefs } from "vue"
	export default defineComponent({
		setup(props,context) {
			const data = reactive({
				
			})
			return {
				...toRefs(data)
			}
		}
	})
</script>
<style lang="scss" scoped>
	.demand-container {
		background-color: #FEFEFE;
		padding: 20rpx 32rpx;
		.demand-item {
			position: relative;
			padding: 40rpx 32rpx;
			margin-bottom: 16rpx;
			background-color: rgba(0,0,0,0.03);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			&-header {
				display: flex;
				height: 34rpx;
				align-items: center;
				.icon {
					font-size: 36rpx;
				}
				&-time {
				  margin-left: 8rpx;
				}
				&-tag {
					height: 32rpx;
					margin-left: 8rpx;
					padding: 2rpx 8rpx;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					border: 1rpx solid #000000;
					font-size: 20rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
					line-height: 23rpx;
				}
			}
			.demand-content {
					margin-top: 12rpx;
					overflow: hidden;
					display: -webkit-box;
				  -webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0,0,0,0.5);
					line-height: 32rpx;
				}
				.stat-tag {
					position: absolute;
					top:0;
					right:0;
					padding: 0 16rpx;
					height: 32rpx;
					background-color: #808080;
					border-radius: 0 24rpx 0 24rpx;
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #fff;
					line-height: 32rpx;
				}
				.stat-tag-gray {
					background-color: #808080 ;
				}
				.stat-tag-success {
					background-color: #45D069 ;
				}
				.stat-tag-error {
					background-color: #FF4869;
				}
				.stat-tag-black {
					background-color: #000000;
				}
		}
	}
</style>

